<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-12 15:02:33
 * @LastEditTime: 2019-10-23 09:50:06
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <van-nav-bar title="环形进度条组件" :border="false" left-arrow fixed @click-left="$router.go('-1')" />
    <div class="circle">
      <radial-progress-bar
        :diameter="100"
        :completed-steps="completedSteps"
        :total-steps="totalSteps"
        innerStrokeColor="#e8d0c9"
        stopColor="#ccc643"
        startColor="#cc5443"
      >
        <span class="f16">{{completedSteps.toFixed(2)+'%'}}</span>
      </radial-progress-bar>
      <p>
        <van-tag type="primary">目标：{{ totalSteps }}</van-tag>
      </p>
      <p>
        <van-tag type="primary">完成： {{ completedSteps }}</van-tag>
      </p>
    </div>

    <van-button class="button-box btn_shadow" type="primary" @click.native="Add()" size="small">+10%</van-button>

    <van-button
      type="danger"
      class="button-box btn_shadow"
      size="small"
      @click.native="Minus()"
    >-10%</van-button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            completedSteps: 10,
            totalSteps: 100
        };
    },
    methods: {
        Add() {
            if (this.completedSteps <= 90) {
                this.completedSteps += 10;
            }
        },
        Minus() {
            if (this.completedSteps >= 10) {
                this.completedSteps -= 10;
            }
        }
    }
};
</script>
<style lang="less">
.circle {
    height: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.f16 {
    font-size: 16px;
    color: #666;
}
.btn_shadow {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.button {
    border: none;
    outline: none;
    padding: 5px 10px;
    min-height: 30px;
    border-radius: 5px;
    background-color: rgb(70, 67, 204);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
    color: #fff;
}
.button-box {
    margin: 20px;
}
</style>